<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue003</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js "></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<style>
    .aaa {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tupian {
        margin-top: 0vh;
        margin-left: 30vh;
    }

    .nihao {
        color: blue;
        text-decoration: none;
    }

    .router-link-exact-active {
        color: #fff;
        background-color: turquoise;
        text-decoration: none;
    }
</style>

<body>
    <div id="app">
        
        <Keep-Alive include='home'>
            <router-view></router-view>
        </Keep-Alive>
    </div>
    <template id="navComponentTemp">
        <div class="aaa">
            <router-link class="nihao" to="/">班级首页</router-link><br>
            <router-link class="nihao" to="/about">班级详情</router-link><br>
            <router-link class="nihao" to="/person">个人详情</router-link><br>
        </div>
    </template>
    <template id='homeTemp'>
        <div>
            <div>
                <nav-component></nav-component>
                <button @click="clickBtn">点击加</button>
                <button @click="click">点击减</button>
                <div>点击了{{ $store.state.clicknum }}次</div>
                <span style="text-align: center;">班级首页</span>
            </div>
        </div>
    </template>
    <template id='aboutTemp'>
        <div>
            <nav-component></nav-component>
            <div>
                <span>{{class_name}}</span>
                <ul>
                    <li v-for='i in courselist'>{{i.courseName}}({{i.teacherName}})</li>
                </ul>
            </div>

            <div><span style="text-align: center;">关于班级</span></div>
        </div>
    </template>
    <template id='personTemp'>
        <div>
            <nav-component></nav-component>
            <button @click="clickBtn">点击加</button>
            <button @click="click">点击减</button>
            <div>点击了{{ $store.state.clicknum }}次</div>
            <div>
                <table class="table" border="1">
                    <thead>
                        <tr>
                            <td colspan="9" style="text-align: center;">
                                <span>同学列表</span>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="clo">
                            <td id="td" v-for="name in studenst_name">{{ name }}<br>
                                <img :src="icon_list" alt="" height="30px" width="auto">
                            </td>
                            <!-- <td id="td" v-for="list in studenst_name"><samp>{{list.name}}</samp><br> -->
                            <!-- <img :src="list.icon" alt="同学图片" height="30px" width="auto"></td> -->

                        </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <span style="text-align: center;">个人主页</span>
            </div>
        </div>
    </template>
</body>

<script>

    var NavComponent = Vue.component('nav-component', {
        template: '#navComponentTemp',
    });
    var home = Vue.component('home', {
        template: '#homeTemp', data: function () {
            return {
                clicknum: 0
            }
        },
        methods: {
            clickBtn() {
                this.$store.commit('increment');
            },
            click() {
                this.$store.commit('decrease');
            }
        }
    });
    var about = Vue.component('about', {
        template: '#aboutTemp', data: function () {
            return {
                class_name: "",
                courselist: [],

            }
        },
        mounted: function () {
            const aboutComponent = this;
            this.class_name = "我要改的班级名";
            this.courselist = [{ "courseName": "课名", "teacherName": "老师名" }];
            axios.get('student.json')
                .then(function (res) {
                    console.log("Axios请求成功");
                    console.log(res);
                    if (res.status == 200) {
                        aboutComponent.class_name = res.data.className;
                        aboutComponent.courselist = res.data.courselist;
                        console.log(res.className);
                        console.log(res.courselist);
                    }
                })
                .catch(function (error) {
                    console.log("Axios请求失败");
                    console.log(error);
                });
        }
    });
    var person = Vue.component('person', {
        template: '#personTemp', data: function () {
            return {
                clicknum: 0,
                studenst_name: [],
                icon_list: []
            }
        }, methods: {
            clickBtn() {
                this.$store.commit('increment');
            },
            click() {
                this.$store.commit('decrease');
            }
        }, mounted: async function () {
            const t = this;
            this.studenst_name = [{ "1-1": "名" }];
            this.icon_list = [{ "icon_list": "名" }];
            await axios.get('zuowei.json')
                .then(function (res) {
                    // console.log("Axios请求成功");
                    // console.log(res);
                    if (res.status == 200) {
                        t.studenst_name = [res.data["1-1"]];
                        return axios.get('student.json'); // 返回另一个请求
                    }
                })
                .catch(function (error) {
                    console.log("第二个Axios请求失败");
                });
            await axios.get('student.json')
                .then(function (res) {
                    console.log("第二个Axios请求成功");
                    console.log(res);
                    if (res.status == 200) {
                        console.log(res.studenst);
                        let filteredUsers = res.data.studenst.filter(studenst => studenst.name == t.studenst_name);
                        console.log(res.data.studenst.filter(studenst => studenst.name === t.studenst_name))
                        console.log(filteredUsers);
                        if (filteredUsers.length > 0) {
                            console.log(filteredUsers);
                            t.icon_list = filteredUsers[0].icon;
                        }
                    }
                }
                ).catch(function (error) {
                    console.log("第二个Axios请求失败");
                    console.log(error);
                });
        }
    })
    var router = new VueRouter({
        routes: [
            { path: '/', component: home },
            { path: '/about', component: about },
            { path: '/person', component: person },
        ]
    });
    const store = new Vuex.Store({
        state: {
            clicknum: 0
        },
        mutations: {
            increment(state) {
                state.clicknum++;
            },
            decrease(state) {
                state.clicknum--;
            }
        }
    });
    new Vue({
        el: '#app',
        router: router,
        store: store
        // components: {
        //     'nav-component': NavComponent
        // }
    })
    // 在 Vuex 中共享 clicknum 状态
</script>

</html>